<template>
	<div class="seting-box">
		<div class="input-item">
			<van-field :model-value="account" readonly label="账号" />
			<van-field :model-value="nickName" readonly label="昵称" />
			<van-field :model-value="wallet" readonly label="余额" />
			<van-field v-model="newPassword" type="password" label="修改密码" />
		</div>
		<van-button round class="save-btn" color="#1baeae" type="primary" v-if="newPassword != ''" @click="save" block>保存</van-button>
		<van-button round class="save-btn" color="#1baeae" type="primary" @click="handleLogout" block>退出登录</van-button>
	</div>
</template>

<script setup>
import { reactive, toRefs, onMounted, computed, getCurrentInstance, watch, defineEmits, ref } from 'vue';
import { ModifyPassword } from '@s/user';
const { proxy } = getCurrentInstance();
const emit = defineEmits(['isNav', 'isBar', 'loading']);
onMounted(() => {
	// 初始化活动状态
	emit('isNav');
	emit('isBar');
	emit('loading');
});
const data = reactive({
	nickName: '',
	account: '',
	newPassword: '',
	wallet: '',
});
const { nickName, account, newPassword, wallet } = toRefs(data);
data.nickName = proxy.$store.state.user.userInfo.uname;
data.account = proxy.$store.state.user.userInfo.account;
data.wallet = proxy.$store.state.user.userInfo.wallet;
const save = async () => {
	ModifyPassword({ type: 2, id: proxy.$store.state.user.userInfo.id, newPassword: proxy.$md5(data.newPassword) }).then((res) => {
		proxy.$toast.success(res.msg);
		proxy.$router.push('/index');
	});
};

const handleLogout = async () => {
	localStorage.removeItem('vuex')
	proxy.$toast.success('登出成功');
	location.href ='index'
};
</script>

<style lang="scss" scoped>
.seting-box {
	padding-top: 48px;
	.save-btn {
		width: 80%;
		margin: 20px auto;
	}
}
</style>
